<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/headerfooter.css">

    <script type="text/javascript" src="../script/api.js"></script>
    <script language="JavaScript" src="../script/vue.js"></script>
    <script language="javascript" src="../script/swiper.min.js"></script>
    <script language="JavaScript" src="../script/common.js"></script>

</head>

<body>
  <div class="bubble-box" id="bubble-box" v-show="prdinfo.product_id>0">
      <div class="bubble-item" @click="goproduct" tapmode>
              <img class="bubimg" onload="fnLoadImage(this)"  :data-url="prdinfo.logo_url" src="../image/default_user_logo.png" />
          <span>{{prdinfo.username}}</span> {{prdinfo.pretime}}发起了订单 ></div>
  </div>

    <div id="products-box" v-cloak>

        <div class="aui-content">
            <section class="aui-grid aui-margin-b-15">
                <div class="aui-row">
                    <div class="aui-col-5 " @click="goactivity(item)" v-for="item in toplogo" :key="item.id" style="padding: 0.2rem 0;" tapmode>

             <img onload="fnLoadImage(this)" class="icon-img" :data-url="item.pic_url" src="../image/default.png" />

                        <div class="aui-grid-label">{{item.title}}</div>
                    </div>
                </div>
            </section>

        </div>

        <div class="aui-content " style="margin-bottom: 4rem;margin-top: 0.5rem">

            <div class="aui-margin-b-10 bgcolor-white" v-for="item in productlist" @click="gopage(item)" :key="item.id" tapmode>
                <div class="listmedia">
                  <img onload="fnLoadImage(this)"    height="155" style="width: 100%" :data-url="item.cover_pic_url" src="../image/default.png" height="155" />
                     <h3 style="padding-left: 0.5rem">
                {{item.title}}
            </h3>
                </div>
                <div class="aui-info" style="padding-top:0"  v-if="item.buy_how==0">
                    <div class="aui-info-item">
                        <span class="sale-price aui-margin-l-5">￥{{item.pin_price/100}}</span><span class="sale-info">{{item.needpersonnum}}人拼单,单买{{item.directbuy_price/100}}元</span>
                    </div>
                    <div class="aui-btn aui-btn-danger aui-margin-r-10">去拼单</div>
                </div>
                <div class="aui-info" style="padding-top:0" v-else>
                   <div class="aui-info-item">
                     <span class="sale-price aui-margin-l-5" >￥{{item.directbuy_price/100}}元</span>
                    </div>
                     <div class="aui-btn aui-btn-danger aui-margin-r-10">去购买</div>
                 </div>
            </div>

        </div>

    </div>
    <script>
        var bubvm = new Vue({
            el:'#bubble-box',
            data:{
               prdinfo:{
                   product_id:0
               }
            },
            methods:{
                getbubble:function () {
                    // $page.get_data('/api/Dynamic/getBubble','post',{},function (ret){
                    //     //console.log(ret.data);
                    //          bubvm.prdinfo = ret.data;
                    //  });
                  //   setTimeout("bubvm.getbubble();",5000);
                },
                goproduct:function () {

                  $page.openwin('product_productinfo', './product/productinfo.html', {
                      id: this.product_id
                  });

                }
            }
        });


        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            pagination: '.swiper-pagination'

        });
        var pvm = new Vue({
            el: '#products-box',
            data: {
                page: 1,
                totalpage: 1,
                retback: true,
                adpic1: [], //顶部幻灯片
                adpic2: [],
                toplogo: [],
                productlist: [],

            },
            methods: {
                 goactivity: function(item) {

                   $page.openwin('activity_index', './activity/index.html', {
                       gourl:item.gourl
                   });


                },
                gopage: function(item) {
                    $page.openwin('product_productinfo', './product/productinfo.html', {
                        id: item.id
                    });
                },
                loadinit: function() {

                    $page.get_data('/api/diy/getContentList', 'post', {
                        placeid: 2
                    }, function(ret) {
                        pvm.toplogo = ret.data;
                    });


                },
                getprdlist: function() {
                    if (pvm.page > pvm.totalpage || !pvm.retback) {
                        return;
                    }
                    pvm.retback = false;
                    $page.get_data('/api/product/getList', 'post', {
                        page: pvm.page
                    }, function(ret) {
                        pvm.totalpage = ret.data.totalpage;
                        pvm.page = pvm.page + 1;
                        pvm.retback = true;
                        ret.data.list.forEach(function(el) {
                            pvm.productlist.push(el);
                        });
                    });
                }
            }
        });
        apiready = function() {
            $page.init();
            pvm.loadinit();
                  bubvm.getbubble();
            pvm.getprdlist();
            $page.pullup(function(ret) {
                pvm.getprdlist();
            });
            $page.pullreload(function(){
                pvm.loadinit();
            });
         }
    </script>

</body>


</html>
